<template>
  <el-main class="app">
    <!-- 上面的面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          v-for="item in foldersList"
          :key="item.nodeId"
          @click.native="touch(item)"
          style="font-size:16px;"
          >{{ item.name }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <!-- 下方表格栏目 -->
    <div class="tableClass">
      <!-- 文件夹目录表格 -->
      <el-table
        style="folderTable"
        :data="tableFolderList"
        stripe
        :header-cell-style="{
          background: '#94AFCC',
          color: '#1A1C1E',
          padding: '0',
        }"
        :header-row-style="{ height: '35px' }"
        :row-style="{ height: '35px' }"
        :cell-style="{ padding: '0px' }"
        @row-dblclick="dbSelected"
      >
        <!-- 表头 -->
        <el-table-column label="名称" fit>
          <template slot-scope="scope">
            <i class="el-icon-folder"></i>
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 文件表格 -->
      <el-table
        class="fileTable"
        :data="tableFileList"
        stripe
        :header-cell-style="{
          background: '#94AFCC',
          color: '#1A1C1E',
          padding: '0',
        }"
        :header-row-style="{ height: '35px' }"
        :row-style="{ height: '35px' }"
        :cell-style="{ padding: '0px' }"
      >
        <!-- 表头 -->
        <el-table-column label="名称" fit>
          <template slot-scope="scope">
            <i class="el-icon-document"></i>
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="format" label="资源格式" fit />
        <el-table-column prop="size" label="大小" fit />
        <el-table-column prop="uploadDate" label="上传时间" fit />
        <!-- 对该列的操作 -->
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <!-- 点击事件传参为scope.row.* -->
            <a :href="scope.row.link" type="text" class="downLoad">下载</a>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-main>
</template>

<script>
export default {
  data() {
    return {
      foldersList: [
        {
          // 第一级目录是课程资源目录，但是不用显示出来，通过nodeId=0来获取后面内容
          nodeId: 0,
          isFolder: true,
          name: "课程资源",
          format: null,
          size: null,
          link: null,
          uploadDate: null,
        },
      ],
      tableFolderList: [],
      tableFileList: [],

      // 当前所在目录
      currentFolder: {
        nodeId: 0,
        isFolder: "",
        name: "",
        format: "",
        size: "",
        link: "",
        uploadDate: "",
      },
    };
  },
  methods: {
    //获得文件列表,后刷新
    returnFileList(nodeId) {
      let options = {};
      options.sections = this.$store.state.temp_courseSections;
      options.nodeId = nodeId;
      this.$http
        .post(this.$api.CourseResourceGetFileListOfNextLevel, options)
        .then((resp) => {
          if (resp.success) {
            console.log(resp.data);
            this.handleOriginalFileList(resp.data);
          } else {
            this.$handleFailResp(this, resp);
          }
        });
    },

    // 刷新文件夹列表、文件列表
    handleOriginalFileList(OriginalFileList) {
      //清空
      this.tableFolderList = [];
      this.tableFileList = [];
      for (let index in OriginalFileList) {
        if (OriginalFileList[index].isFolder) {
          // 是文件夹
          this.tableFolderList.push(OriginalFileList[index]);
        } else {
          this.tableFileList.push(OriginalFileList[index]);
        }
      }
    },

    touch(item) {
      console.log(item);
      while (this.foldersList.pop() != item) {}
      this.foldersList.push(item);
      // 更新currentFolder
      this.resetCurrentFolder(item);

      // 点击面包屑之后需要接接口获取tableFolderList和tableFileList
      // 这里需要接接口，详细见接口文档“获得下一级文件列表”
    },

    // 在文件夹表格里点击一个文件夹
    dbSelected(item) {
      console.log("dbclick");
      this.resetCurrentFolder(item);
      // 更新面包屑
      this.foldersList.push(item);
    },

    // 更新当前目录
    resetCurrentFolder(item) {
      this.currentFolder = item;
      this.returnFileList(item.nodeId);
    },
  },

  mounted() {
    // 在mounted的时候就要调用接口，刷新第一级页面
    this.returnFileList(this.currentFolder.nodeId);
    // 详细见接口文档“获得下一级文件列表”，第一级页面nodeId为0调用
  },
};
</script>

<style lang="less" scope>
.app {
  margin: 0 auto;
  vertical-align: middle;
  width: 90%;
  padding: 20px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border: 3px solid rgba(0, 0, 0, 0.04);
}

.breadcrumb {
  margin: 15px;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  color: #333333;
  font-size: 17px;
  font-weight: 500;
}

.fileTable {
  margin-top: 20px;
}

.downLoad {
  text-decoration: none;
  color: #409eff;
}

.btn {
  background: rgb(182, 196, 211);
  color: #333333;
  font-weight: 500;
  font-size: 16px;
}
</style>
